import React, {Component} from 'react';
import {Button, Dimensions, ScrollView, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import {HeaderTitle} from '../../../../componet/settingComponent/HeaderTitle';
import {BrLine} from '../../../../componet/settingComponent/BrLine';
import {CardItem} from '../../../../componet/settingComponent/CardItem';
import AllStyle from '../../../../style';
import {BottomButton} from '../../../../componet/settingComponent/BottomButton';
import {getClasseslist} from '../../../../api/classes';
import {Toast} from '../../../../utils/Toast';
import {Loading} from '../../../../utils/Loading';
import Icons from 'react-native-vector-icons/Entypo';
import AntDesign from 'react-native-vector-icons/AntDesign';


const width = Dimensions.get('window').width;


export class ClassessManageScreen extends Component {


    constructor(props) {
        super(props);
        this.state = {
            routePathName: this.props.route.params.routePathName,
            visible: this.props.route.params.visible == null ? false : true,

            selectedIndex: this.props.route.params.classesId == null ? null : this.props.route.params.classesId,
            name: '',
            classesList: [],
        };
    }

    componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS) {

        if (this.props.route.params != prevProps.route.params) {
            this.getList();
        }

    }

    componentDidMount() {
        this.getList();
    }

    changeSelectedIndex = (id) => {
        if (id == this.state.selectedIndex) {
            id = null;
        }
        this.setState({selectedIndex: id});

    };
    back = () => {

        const route = {
            name: this.state.routePathName,
            params: {
                classesId: this.state.selectedIndex,
            },
        };
        this.props.navigation.navigate(route);
    };
    goto = (name, classesId = null) => {

        const route = {
            name: 'SaveClass',
            params: {
                classesId: classesId,
                title: name,
            },
        };
        this.props.navigation.navigate(route);
    };
    getList = () => {
        let data = {
            page: 1,
            limit: 100,
        };
        Loading.show();
        getClasseslist(data).then(res => {
                Loading.hidden();
                let {page} = res;
                this.setState({classesList: page.list});
                //console.log(res, '80018520');
            },
        ).catch(err => {
            Loading.hidden();
            Toast.showWarning(err.toString());
        }).finally(()=>{
            Loading.hidden();
        });
    };

    render() {
        let itemWidth;
        if (this.state.visible == true) {
            itemWidth = width - 15 - 15 - 15 - 15 - 18 - 15;
        } else {
            itemWidth = width - 15 - 15 - 15 - 15;
        }
        //console.log(this.props.route);
        return (
            <SafeAreaView edges={['top', 'left', 'right', 'bottom']} style={{flex: 1, backgroundColor: '#ffffff'}}>
                <View style={style.container}>
                    <HeaderTitle goBack={() => this.back()} headtitle={this.props.route.params.title}></HeaderTitle>
                    <ScrollView style={{padding: 15}}>
                        <View style={[AllStyle.card]}>
                            {
                                this.state.classesList.map((item, i) => {
                                    return (
                                        <View style={{
                                            flexDirection: 'row',
                                            justifyContent: 'space-between',
                                            alignItems: 'center',
                                        }}>
                                            {this.state.visible == true ? (
                                                <TouchableOpacity style={{paddingRight: 15}} onPress={() => {
                                                    this.changeSelectedIndex(item.classesId);
                                                }}>
                                                    {
                                                        this.state.selectedIndex == item.classesId ?
                                                            (<AntDesign name={'checkcircle'} style={{color: '#409EFF'}}
                                                                        size={18}/>) :
                                                            (<Icons name={'circle'} style={{color: '#9FA5AB'}}
                                                                    size={18}/>)
                                                    }
                                                </TouchableOpacity>
                                            ) : (
                                                <View></View>
                                            )}

                                            <TouchableOpacity style={{width: itemWidth}} key={item.classesId}
                                                              onPress={() => this.goto('修改班次', item.classesId)}>

                                                <CardItem title={item.classesName}
                                                          value={item.workStartTime.substring(0, 5) + '-' + item.workEndTime.substring(0, 5)}></CardItem>

                                                <BrLine></BrLine>
                                            </TouchableOpacity>
                                        </View>

                                    );
                                })
                            }
                        </View>
                    </ScrollView>
                    <BottomButton click={() => this.goto('新增班次')} title='新增班次'/>
                </View>
            </SafeAreaView>
        );
    }

}

const style = StyleSheet.create({
    container: {
        backgroundColor: '#F1F0F5',
        flex: 1,
    },
    con_top: {
        backgroundColor: '#fff',
        borderBottomWidth: 1,
        borderStyle: 'solid',
        borderColor: '#E8E8EA',
        width: width,
        padding: '3%',
        flexDirection: 'row',
    },

});
